<template>
  <drag-modal
    title="设置音量"
    :width="400"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="submitLoading"
    :maskClosable="false"
    :centered="true"
    @ok="ok"
    @cancel="cancel"
  >
    <a-spin :spinning="loading">
      <a-form-model :model="form" ref="form" :rules="validatorRules" :label-col="{span: 5}" :wrapperCol="{span: 16, offset: 1}">
        <div class="fold">
          <a-form-model-item
            label="音量"
            prop="volume"
          >
            <a-select v-model="form.volume" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
              <a-select-option v-for="index in volumeMaxValue + 1" :key="index-1" :value="index-1">{{index-1}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-spin>
    <template slot="footer">
      <a-button v-if="form.ids && form.ids.length == 1" icon="sync" @click="refresh"></a-button>
      <a-button @click="cancel">关闭</a-button>
      <a-button :disabled="submitLoading" type="primary" @click="ok">确定</a-button>
    </template>
  </drag-modal>
</template>

<script>
import {terminalService, commandService} from '@/services'
import CommandConstant from '@/constant/terminal-command'
export default {
  name: 'VolumeModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      submitLoading: false,
      volumeMaxValue: 100,
      form: {
        ids: [],
        volume: undefined
      },
      validatorRules: {
        volume: [
          { required: true, message: '请选择音量', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel', CommandConstant.TERMINAL_COMMAND_SET_VOLUME)
    },
    ok() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          commandService.setVolume(JSON.stringify(this.form)).then(res => {
            const result = res.data
            if (result.code === 200) {
              this.$emit('ok', CommandConstant.TERMINAL_COMMAND_SET_VOLUME)
              this.$message.success(result.msg)
            }
          }).finally(this.submitLoading = false)
        }
      })
    },
    refresh() {
      this.queryVolume()
      this.loading = true
      setTimeout(() => {
        const params = {
          id: this.form.ids[0]
        }
        terminalService.queryVolume(JSON.stringify(params)).then(res => {
          const result = res.data
          if (result.data) {
            this.form.volume = result.data.volume
            this.$message.success('刷新成功')
          }
        }).finally(this.loading = false)
      }, 1500)
    },
    queryVolume() {
      if (this.form.ids && this.form.ids.length <= 1) {
        this.loading = true
        const params = {
          ids: this.form.ids
        }
        commandService.queryVolume(JSON.stringify(params)).then(res => {
        }).finally(this.loading = false)
      }
    },
    queryVolumeSetting() {
      this.loading = true
      const params = {
        id: this.form.ids[0]
      }
      terminalService.queryVolumeSetting(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.data && result.data.volume) {
          this.form.volume = result.data.volume
        }
      }).finally(this.loading = false)
    }
  }
}
</script>